<template>
  <div>
    <a-row :gutter="10">
      <a-col :span="18">
        <a-card>
          <a-row type="flex" justify="space-around" align="middle">
            <a-col :span="8">
              <div class="info">
                <div class="personal">
                  <img width="65" height="65" :src="avatar ? avatar : 'http://new-crm-upload.oss-cn-hangzhou.aliyuncs.com/20210918/1631944780188.png'"/>
<!--                  <img width="65" height="65" src="../../assets/images/img_default.png"/>-->
                  <div>
                    <p>{{name}}</p>
                    <span @click="$router.push({ name: 'Account' })">修改</span>
                  </div>
                </div>
                <div class="btn">
                  <a-button shape="round" @click="$router.push({ name: 'OrderList' })">订单信息</a-button>
                  <a-button shape="round" @click="$router.push({ name: 'InvoiceList' })">申请发票</a-button>
                </div>
              </div>
            </a-col>
            <a-col :span="15">
              <a-row class="data" type="flex" justify="space-around" align="middle">
                <a-col :span="8">
                  <p>{{userInfo.orders_fee}}</p>
                  <span>订单金额</span>
                </a-col>
                <a-col :span="8">
                  <p>{{userInfo.year_fee}}</p>
                  <span>年度消费</span>
                </a-col>
                <a-col :span="8">
                  <p>{{collectList.length}}</p>
                  <span>收藏内容</span>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-card>
        <a-card class="order" title="我的订单" style="margin-top:10px">
          <template slot="extra">
            <a-button size="small" type="link" @click="$router.push({ name: 'OrderList' })">更多</a-button>
          </template>
          <a-row type="flex" justify="space-around" align="middle" style="text-align: center;">
            <a-col :span="4" @click="onTabs(10)">
              <a-badge :count="pendingNum">
                <div :class="active === 10 ? 'unpay on' : 'unpay'" style="margin: 0 auto"></div>
                <p style="margin-top: 10px;">待付款</p>
              </a-badge>
            </a-col>
            <a-col :span="4" @click="onTabs(20)">
              <a-badge :count="successNum">
                <div :class="active === 20 ? 'completed on' : 'completed'" style="margin: 0 auto"></div>
                <p style="margin-top: 10px;">已完成</p>
              </a-badge>
            </a-col>
            <a-col :span="4" @click="onTabs('')">
              <a-badge :count="allNum">
                <div :class="active === '' ? 'all on' : 'all'" style="margin: 0 auto"></div>
                <p style="margin-top: 10px;">全部订单</p>
              </a-badge>
            </a-col>
          </a-row>
          <a-divider style="margin-top:20px" />
          <div style="padding: 10px 0">
            <a-empty v-if="orderList.length === 0">
              <span slot="description"> 您买的东西太少了，这里都空空的，快去挑选合适的商品吧！~~ </span>
            </a-empty>
            <div v-else class="order-list">
              <div class="order-t" style="margin-bottom:5px">
                <a-row type="flex">
                  <a-col :span="14" :order="1">
                    订单详情
                  </a-col>
                  <a-col :span="4" :order="2">
                    金额
                  </a-col>
                  <a-col :span="3" :order="3">
                    状态
                  </a-col>
                  <a-col :span="3" :order="4">
                    操作
                  </a-col>
                </a-row>
              </div>
              <div v-for="item in orderList" :key="item.id" class="order-item">
                <div class="order-t">
                  <a-space size="large">
                    <div>{{item.created_at}}</div>
                    <div>订单编号：{{item.order_no}}</div>
                  </a-space>
                </div>
                <div class="order-c">
                  <a-row type="flex">
                    <a-col :span="14" :order="1">
                      <div class="product-cover">
                        <dl>
                          <dd>
                            <img width="88" height="88" :src="item.image" />
                          </dd>
                          <dt>
                            <h4>{{item.name}}</h4>
                            <p><ellipsis :length="30">{{item.describe}}</ellipsis></p>
                          </dt>
                        </dl>
                      </div>
                    </a-col>
                    <a-col :span="4" :order="2">
                      ￥{{item.price}}
                    </a-col>
                    <a-col :span="3" :order="3">
                      <a-tag>{{statusOpts[item.status]}}</a-tag>
                    </a-col>
                    <a-col :span="3" :order="4">
                      <a-button v-if="item.status == 10" size="small" type="danger" block @click="$router.push({ name: 'Pay', params: { no: item.order_no } })">付款</a-button>
                      <a-button v-if="item.status == 20" size="small" type="default" block @click="$router.push({ name: 'ProductDetail', params: { id: item.id } })">再次购买</a-button>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card style="text-align: center">
          <img src="@/assets/images/img_avator.png" class="avator"/>
          <h4 style="margin: 8px 0">周鸿燕</h4>
          <p>联系电话：15978691562</p>
          <p>400电话：400-9932-799</p>
          <a-button type="danger" style="margin-top:10px" @click="$router.push({ name: 'AddComplaint' })">投诉建议</a-button>
        </a-card>
        <a-card title="我的收藏" style="margin-top:10px">
          <template slot="extra">
            <a-button size="small" type="link" @click="$router.push({ name: 'CollectList' })">更多</a-button>
          </template>
          <ul class="hot">
            <a-empty v-if="collectList.length === 0">
              <span slot="description">暂无收藏</span>
            </a-empty>
            <li v-for="item in collectList" :key="item.id" @click="$router.push({ name: 'ProductDetail', params: { id: item.gid } })">
              <img width="80" height="80" :src="item.image"/>
              <div>
                <p>{{item.name}}</p>
              </div>
            </li>
          </ul>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as getMy from '@/api/login'
import { getCollectList } from '@/api/collect'
import Ellipsis from '@/components/Ellipsis/Ellipsis'
import { getOrderList } from '@/api/order'

export default {
  components: {
    Ellipsis
  },
  name: 'index',
  data () {
    return {
      active: 10,
      collectList: [],
      orderList: [],
      statusOpts: {},
      queryParam: {},
      userInfo: {},
      successNum: '',
      allNum: '',
      pendingNum: ''
    }
  },
  created () {
    this.getCollectList()
    this.getOrderList()
    this.getData()
  },
  methods: {
    getData () {
      getMy.getInfo().then(res => {
        this.userInfo = res.result
      })
    },
    onTabs (key) {
      this.active = key
      this.queryParam['filter[status]'] = key
      this.getOrderList(this.queryParam)
    },
    getCollectList () {
      getCollectList().then(res => {
        this.collectList = res.result.data
      })
    },
    getOrderList (params) {
      const app = this
      app.loading = true
      const parameter = {}
      parameter['page_size'] = 4
      getOrderList(Object.assign(parameter, this.queryParam)).then(res => {
        app.orderList = res.result.data
        app.statusOpts = res.result.statusOpts
        app.pendingNum = res.result.pendingCount
        app.successNum = res.result.successCount
        app.allNum = res.result.allCount
        app.loading = false
      })
    }
  },
  computed: {
    ...mapGetters(['name', 'avatar'])
  }
}
</script>

<style scoped>
 h4, p, a, li, ul, div, span {margin: 0;padding: 0;font-weight: 500;}
.info{}
.info .personal{display: flex;align-items: center;}
.info .personal img{margin-right: 20px;}
.info .personal p{font-size: 18px;color: #333333;font-weight: 700;}
.info .personal span{font-size: 12px;color: #999999;text-decoration: underline;cursor: pointer;}
.info .btn{display: flex;align-items: center;justify-content: space-around;margin-top: 20px;}
.data{text-align: center;border-left: solid 1px #eeeeee;}
.data p{font-size: 24px;color: #f70306;font-weight: 700;}
.unpay{width: 37px;height: 33px;background-image: url("../../assets/images/img_order1.png");background-repeat: no-repeat;background-position: 0 0;}
.unpay.on{background-image: url("../../assets/images/img_order1.png");background-repeat: no-repeat;background-position: 0 -33px;}
.accepting{width: 46px;height: 37px;background-image: url("../../assets/images/img_order2.png");background-repeat: no-repeat;background-position: 0 0;}
.accepting.on{background-image: url("../../assets/images/img_order2.png");background-repeat: no-repeat;background-position: 0 -37px;}
.completed{width: 37px;height: 33px;background-image: url("../../assets/images/img_order3.png");background-repeat: no-repeat;background-position: 0 0;}
.completed.on{background-image: url("../../assets/images/img_order3.png");background-repeat: no-repeat;background-position: 0 -33px;}
.all{width: 30px;height: 34px;background-image: url("../../assets/images/img_order4.png");background-repeat: no-repeat;background-position: 0 0;}
.all.on{background-image: url("../../assets/images/img_order4.png");background-repeat: no-repeat;background-position: 0 -34px;}
.emptyCart{display: flex;align-items: center;justify-content: center;font-size: 12px;color: #c7c7c7;margin-top: 100px;}
.emptyCart img{margin-right: 20px;}
/*.avator{border: solid 3px #ffa7a7;border-radius: 50%;}*/
 .avator{border-radius: 50%;}
.hot .ant-card-body{padding: 24px 10px;}
.hot li{display: flex;align-items: center; padding-bottom:20px; border-bottom: 1px dashed #eee;}
.hot li img{margin-right: 12px;}
.hot li p{font-size: 16px;color: #333333;}
.hot li span{font-size: 12px;}
 .order-item {
   border: 1px solid #eee;
   margin-bottom:2px;
 }
 .order-t {
   background: #f3f3f3;
   height: 38px;
   line-height: 38px;
   padding-left: 20px;
   font-size: 14px;
   color: #999;
 }
 .order-c {
   padding: 20px;
 }
 .product-cover dl dd {
   width:88px;
   float:left;
   margin-right:20px;
 }
 .product-cover dl dt h4 {
   font-size: 16px;
 }
</style>
